<template>
  <div>
    <div id="xun-zhe">
      <div id="xuan-zifu" @click="dian()">x</div>
      <div id="xuan-shu"></div>
      <div id="xun-box">
        <div id="box-top">留下您的信息，{{ message }}将会联系你</div>
        <div id="box-bootom">
          <div id="box-boottom-middle">
            <div id="message">
              <div id="message-name">您的名字</div>
              <input id="name-in" type="text" placeholder="请输入您的名字" />
            </div>
            <div id="message">
              <div id="message-name">手机号码</div>
              <input
                id="name-in"
                type="text"
                placeholder="请输入您的手机号码"
              />
            </div>
            <div id="message">
              <div id="message-name">验证码</div>
              <input id="name-in" type="text" placeholder="请输入验证码" />
            </div>
            <div id="change">
              <input id="check" type="checkbox" />
              <span>同意</span>
              <span id="yinsi">《隐私政策》</span>
              <span>和</span>
              <span id="yinsi">《个人信息保护声明》</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "zixun",
  data() {
    return {
      message: "驾校",
    };
  },
  methods: {
    dian() {
      console.log('a');
      this.$emit('pan', false);
    },
  },
};
</script>
<style scoped>
#xun-zhe {
  background: rgba(0, 0, 0, 0.445);
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9998;
}
#xun-box {
  width: 90%;
  height: 63vh;
  background-image: linear-gradient(
    to right,
    rgb(0, 207, 233),
    rgb(0, 142, 248)
  );
  position: absolute;
  z-index: 9999;
  top: 20vh;
  left: 5vw;
  border-radius: 4vh;
  overflow: hidden;
}
#xuan-zifu {
  top: 10vh;
  right: 5vw;
  width: 10vw;
  height: 10vw;
  border-radius: 10vw;
  position: absolute;
  background-image: linear-gradient(
    to right,
    rgb(0, 207, 233),
    rgb(0, 142, 248)
  );
  text-align: center;
  color: white;
  line-height: 10vw;
  font-size: 3vh;
}
#xuan-shu {
  position: absolute;
  top: 14.5vh;
  right: 9.5vw;
  background-image: linear-gradient(
    to right,
    rgb(0, 207, 233),
    rgb(0, 142, 248)
  );
  width: 1vw;
  height: 6vh;
}
#box-top {
  width: 100%;
  height: 21vh;
  text-align: center;
  line-height: 21vh;
  color: white;
}
#box-bootom {
  width: 100%;
  height: 42vh;
  background: white;
}
#box-boottom-middle {
  width: 95%;
  height: 60%;
  margin: 0 auto;
}
#message {
  width: 100%;
  height: 33%;
  border-bottom: 0.2vh solid rgb(246, 246, 246);
  display: flex;
}
#message-name {
  width: 30%;
  height: 100%;
  line-height: 8vh;
}
#name-in {
  width: 70%;
  height: 50%;
  margin-left: 2vw;
  margin-top: 2vh;
  border: none;
  outline: none;
}
#check {
  width: 5vw;
  height: 5vw;
}
#yinsi {
  color: rgb(101, 198, 251);
}
#change {
  font-size: 1.8vh;
}
</style>